{% load follow_records_simple_tag %}

<link rel="stylesheet" href="/statics/public/vendor/plyr/plyr.css">
<link rel="stylesheet" href="/statics/public/css/examples/components/structure/timeline.css">

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
        <span aria-hidden="true">×</span>
    </button>
    <h4 class="modal-title" id="exampleModalTabs">客户跟进记录 - {{ client_info_obj.client_name }}</h4>
</div>
<div class="modal-body">
    <div class="tab-content" style="overflow-y: auto; height: 500px">
        <table class="table table-bordered table-hover dataTable table-striped width-full text-nowrap" id="dataTable_follow_records">
            <thead>
            <tr>
                <th>ID</th>
                <th>编号</th>
                <th>跟进内容</th>
                <th>截图</th>
                <th>添加时间</th>
            </tr>
            </thead>
            <tbody>
                {% for obj in follow_records_obj %}
                    <tr>
                        <td>{{ obj.id }}</td>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ obj.content }}</td>
                        <td>{% print_img_html obj.image_url %}</td>
                        <td>{{ obj.create_date|date:"Y-m-d H:i:s" }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
    (function ($) {
        {# 在模态对话框关闭时清空数据 #}
        $(".modal").on("hidden.bs.modal", function() {
            $(this).removeData("bs.modal");
            $(this).find(".modal-content").children().remove();
        });

        var table = $('#dataTable_follow_records').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "每页显示 _MENU_ 条",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "第 _START_ 至 _END_ 项，共 _TOTAL_ 项",
                "sInfoEmpty": "第 0 至 0 项，共 0 项",
                "sInfoFiltered": "",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            "processing": true,
            "destroy": true,
{#            "serverSide": true,  // 服务器模式#}
{#            "ajax": "?type=ajax_json", // ajax 取数据#}
            "aaSorting": [
                [0, "asc"]
            ], // 默认排序
            "columns": [
                {
                    "data": "id",
                    "orderable": false,  // 禁止排序
                    "visible": false,       // 不可见
                    "searchable": false     // 不可搜索
                },
                {
                    "data": "number",
                    "orderable": false,  // 禁止排序
                    "searchable": false     // 不可搜索
                },
                {
                    "data": "content",
                    "orderable": false,
                    "searchable": false
                },
                {
                    "data": "img",
                    "orderable": false,
                    "searchable": false     // 不可搜索
                },
                {
                    "data": "create_date"
                }
            ]
        });

    })(jQuery)
</script>

